import { useState, useRef,useEffect } from 'react'

import '../../pages/App.css';
import './Premium.css';
import { Descriptions,Table,Modal,Input,Message } from "@arco-design/web-react";
import { IconExport } from '@arco-design/web-react/icon';
// import Draggable from 'react-draggable';
import "@arco-design/web-react/dist/css/arco.css";
import { useNavigate } from "react-router-dom";
import LoginDialog from "../../pages/main/LoginDialog";
import {userInfo as getUser,orderList,updateUserInfo} from '../../api/all'
import VipfreeIcon from '../../assets/user_vip_free.svg'
import VipmonthIcon from '../../assets/user_vip_month.png'
import VipyearIcon from '../../assets/user_vip_year.svg'
import EditIcon from '../../assets/edit.svg'
import TotalCountIcon from '../../assets/total_count.svg'
import DiffCountIcon from '../../assets/diff_count.svg'

const columns = [
  {
    title: '充值编号',
    dataIndex: 'id'
  },
  {
    title: '充值金额',
    dataIndex: 'price'
  },
  {
    title: '充值类型',
    dataIndex: 'type'
  }
];
function Premium() {
  const navigate = useNavigate();
  const [userInfo, setUserInfo] = useState({})
  const [userInfoCol, setUserInfoCol] = useState([])
  const [datass,setDatass] = useState([])
  const loginRef = useRef(null)
  const inputRef = useRef(null)

  const [visible, setVisible] = useState(false);

  useEffect(() => {
    getUserInfo()
  }, [])

  const getUserInfo = ()=>{
    getuserAjax()
    getOrderList()
  }

  const getuserAjax = ()=>{
    getUser().then((res)=>{
      let user = res.result
      let datauser = [
        // {
        //   label: '用户名',
        //   value: user.name,
        // },
        {
          label: '用户ID',
          value: user.id,
        },
        {
          label: '手机号码',
          value: user.phone,
        },
        // {
        //   label: '总次数',
        //   value: user.count,
        // },
        // {
        //   label: '剩余次数',
        //   value: user.count - user.use_count,
        // },
        // {
        //   label: '会员类型',
        //   value: <Tag color={user.is_vip==0?'#7bc616':'#ff7d00'}>{user.is_vip==0?'免费':user.vip_id==6?'月会员':'年会员'}</Tag>,
        // },
        {
          label: '注册时间',
          value: user.created_at.replace('T',' '),
        },
      ];
      setUserInfoCol(datauser)
      setUserInfo(user)
    })
  }
  const getOrderList = ()=>{
    orderList().then((res)=>{
      res && res.result?.map((obj)=>{
        obj['price'] = obj.vip_info.price
        obj['type'] = obj.vip_info.name
        obj.order_time = obj.order_time.replace('T',' ')
      })
      setDatass(res.result)
    })
  }

  const updateUserName = (params)=>{
    updateUserInfo({...userInfo,...params}).then((res)=>{
      if(res.code==0){
        Message.success('修改成功')
        getuserAjax()
      }else{
        Message.error(res.msg)
      }
    })
  }

  return (
    <>
    <div className="px-[15px] py-3 h-full overflow-hidden">
    <div className="flex flex-col bg-primary-background dark:text-primary-text rounded-[10px] h-full overflow-y-auto">
      <div className='top_box'>
          <div className="tit">个人中心</div>
          <div onClick={()=>{
            localStorage.removeItem('token')
            navigate("/")
          }} className="flex flex-row items-center gap-1 min-w-max"><IconExport /><span>退出登录</span></div>
      </div>

      <div className='content'>
          <div className='con_left'>
            {/* <p className="text-[#303030] w-fit rounded-[5px] px-2 py-[4px] text-sm font-semibold mt-2">基本信息</p> */}
            {/* <Descriptions column={1} title='' data={userInfoCol} labelStyle={{ textAlign: 'right', paddingRight: 36 }}/> */}
            <div className='first'>
              <div className='headimg'>
                <div className='head_img_box'>
                  <img alt='' src={userInfo.head}/>
                </div>
                <img className='vip_type' alt='' src={userInfo.is_vip===0?VipfreeIcon:userInfo.vip_id===6?VipmonthIcon:VipyearIcon}/>
              </div>
              <div className='user_name'>
                {userInfo.name}
              </div>
              <div className='edit_user_name' onClick={()=>{setVisible(true)}}>
                <img src={EditIcon} alt=''/><span>修改用户名</span>
              </div>
            </div>
            <div className='second'>
              <p className="tit">基本信息</p>
              <Descriptions column={1} title='' data={userInfoCol} 
              valueStyle={{color:'#222222'}}
              labelStyle={{ textAlign: 'left', paddingRight: 36,color:'#4d4d4d' }}/>
            </div>
            <div className='third'>
                <div className='third_left count_box'>
                  <div className='img_box'>
                    <img src={TotalCountIcon} alt=''/>
                  </div>
                  
                  <p>总次数</p>
                  <div className='count'>{userInfo.count}</div>
                </div>
                <div className='third_right count_box'>
                  <div className='img_box'>
                    <img src={DiffCountIcon} alt=''/>
                  </div>
                  <p>剩余次数</p>
                  <div className='count'>{userInfo.count - userInfo.use_count}</div>
                </div>
            </div>
          </div>
          <div className='con_right'>
            <p className="tit">支付记录</p>
            <Table columns={columns} rowKey={'id'} border={false} stripe data={datass} style={{
              border:'none'
            }}/>
          </div>
      </div>
      <div style={{position: "fixed", zIndex: 9999, inset: "16px", pointerEvents: "none"}}></div>
      </div>
    </div>
    <LoginDialog ref={loginRef}/>


    <Modal
      className="xzy_modal"
      style={{
        width: '260px',
        height: '176px',
        border: '1px solid #D6D6D6',
        borderRadius:'20px'
      }}
      title='修改用户名'
      visible={visible}
      autoFocus={true}
      onCancel={() => setVisible(false)}
      footer={<div className='btns'>
        <div className='butn cancel' onClick={() => setVisible(false)}>取消</div>
        <div className='butn confirm' onClick={() => {
          setVisible(false)
          updateUserName({name:inputRef.current.dom.value})
        }}>确定</div>
      </div>}
    >
      <Input ref={inputRef} allowClear  placeholder='请输入新用户名' />
    </Modal>


    </>
  );
}

export default Premium;
